<template>
<el-row>
  <el-col :xs="0" :md="24">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal">
          <el-menu-item index="/home">首页</el-menu-item>
          <el-sub-menu index="/coll">
            <template #title>大学</template>
            <el-menu-item index="/coll">院校库</el-menu-item>
            <el-menu-item index="/coll/satis">院校满意度</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/major">
            <template #title>专业</template>
            <el-menu-item index="/major">专业库</el-menu-item>
            <el-menu-item index="/major/satis">专业满意度</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/volun">
            <template #title>志愿</template>
            <el-menu-item index=""><a href="https://gaokao.chsi.com.cn/zyck/" style="color: inherit;text-decoration: none" target="_blank">志愿助手</a></el-menu-item>
            <el-menu-item index="/volun/advisory">咨询师</el-menu-item>
          </el-sub-menu>

          <el-menu-item v-show="taskShow" index="/task">咨询任务列表</el-menu-item>

          <el-menu-item :index="user.target" style="float: right">{{user.title}}</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <el-card>

          <router-view/>

        </el-card>
      </el-main>
      <el-footer>
        <el-space wrap>
          <el-link href="https://gaokao.chsi.com.cn/" target="_blank">阳光高考</el-link>
          <el-link href="https://gkcx.eol.cn/" target="_blank">中国教育在线</el-link>
          <el-link href="http://www.moe.gov.cn/" target="_blank">中华人民共和国教育部</el-link>
          <el-link href="http://www.sdzk.cn/" target="_blank">山东省教育招生考试院</el-link>
        </el-space>
      </el-footer>
    </el-container>
  </el-col>
</el-row>
  <el-row>
    <el-col :xs="24" :sm="0">
      <el-card shadow="never">
        <el-button icon="el-icon-s-unfold" @click="drawer = true" style="float: left; "></el-button>
      </el-card>

      <el-main>
        <el-card style="min-height: 750px">
          <router-view/>
        </el-card>
      </el-main>

      <el-footer>
        <el-space wrap direction="vertical">
          <el-link href="https://gaokao.chsi.com.cn/" target="_blank">阳光高考</el-link>
          <el-link href="https://gkcx.eol.cn/" target="_blank">中国教育在线</el-link>
          <el-link href="http://www.moe.gov.cn/" target="_blank">中华人民共和国教育部</el-link>
          <el-link href="http://www.sdzk.cn/" target="_blank">山东省教育招生考试院</el-link>
        </el-space>
      </el-footer>
    </el-col>

    <el-drawer
        v-model="drawer"
        direction="ltr"
        size="70%" destroy-on-close>
      <el-menu :default-active="activeIndex" unique-opened router class="el-menu-demo">
        <el-menu-item :index="user.target">{{user.title}}</el-menu-item>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-sub-menu index="/coll">
          <template #title>大学</template>
          <el-menu-item index="/coll">院校库</el-menu-item>
          <el-menu-item index="/coll/satis">院校满意度</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/major">
          <template #title>专业</template>
          <el-menu-item index="/major">专业库</el-menu-item>
          <el-menu-item index="/major/satis">专业满意度</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/volun">
          <template #title>志愿</template>
          <el-menu-item index=""><a href="https://gaokao.chsi.com.cn/zyck/" style="color: inherit;text-decoration: none" target="_blank">志愿助手</a></el-menu-item>
          <el-menu-item index="/volun/advisory">咨询师</el-menu-item>
        </el-sub-menu>

        <el-menu-item v-show="taskShow" index="/task">咨询任务列表</el-menu-item>
      </el-menu>
    </el-drawer>
  </el-row>
</template>

<script>
import {reactive, toRefs, onBeforeMount} from 'vue'
import {getUser, isLogin} from "@/utils/cookies";
export default {
  name: "index",
  setup(){
    const data = reactive({
      activeIndex: '/home',
      user: {
        target: '/login',
        title: '未登录'
      },
      taskShow: false,
      drawer: false
    })

    onBeforeMount(() => {
      data.user.title = getUser().nickName?  getUser().nickName: '未登录'
      data.user.target = isLogin()? '/user': '/login'
      data.taskShow = getUser().identity === '咨询师'
    })
    return {
      ...toRefs(data),
    }
  }
}
</script>

<style lang="less" scoped>
.el-container{
  padding: 0px;
  margin: 0px;
  .el-header{
    padding: 0px;


    .el-menu{
      padding: 0 100px;
    }
  }

  .el-main{

    .el-card{
      width: 1400px;
      min-height: 750px;
      margin: auto;
    }
  }

}

.el-footer{
  height: 150px;
  background-color: #2c3e50;
  padding-top: 20px;
  padding-bottom: 20px;

  .el-link{
    color: aliceblue;
  }
}
</style>
